<script setup lang="ts">
import { useI18n } from 'vue-i18n';

const { t } = useI18n<{ message: typeof import('../locales/en-US').default }>();
defineProps<{
  value: string;
}>();

const emit = defineEmits<{
  search: [query: string];
}>();

function handleInput(e: Event) {
  const target = e.target as HTMLInputElement;
  emit('search', target.value);
}
</script>

<template>
  <div class="search-container">
    <div class="search-icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="11" cy="11" r="8"></circle>
        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
      </svg>
    </div>
    <input 
      type="text" 
      :placeholder="t('common.search')" 
      class="search-input"
      :value="value"
      @input="handleInput"
    />
  </div>
</template>

<style scoped>
.search-container {
  position: relative;
  margin: 0 24px 16px;
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
}

.search-input {
  width: 100%;
  padding: 12px 12px 12px 40px;
  border-radius: 8px;
  border: none;
  background-color: #eaecf0;
  font-size: 14px;
  outline: none;
  transition: background-color 0.2s;
}

.search-input:focus {
  background-color: #e2e4e9;
}
</style>